<template>
  <div class="wrap">
    <div class="title-container">
      <img src="../../assets/logo-login.png" alt="" class="logo">
      <div class="title">
        <span class="title-left">{{titles[0].substr(0,2)}}</span>
        <span class="title-right">{{titles[0].substr(2,2)}}</span>
      </div>
    </div>
    <div class="login-container">
      <div class="form-container">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px">
          <el-form-item prop="username">
            <el-input v-model="ruleForm.username" placeholder="用户名">
              <icon slot="prefix" name="user" class="el-input__icon input-icon"></icon>
            </el-input>
          </el-form-item>
          <el-form-item prop="password" prefix-icon="el-icon-search">
            <el-input type="password" placeholder="密码" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')">
              <icon slot="prefix" name="lock" class="el-input__icon input-icon"></icon>
            </el-input>
          </el-form-item>
          <div class="login-other">
            <router-link :to="'forget'" class="forget">忘记密码？</router-link>
            <router-link :to="'signin'" class="signin">免费注册</router-link>
          </div>
          <div class="login-btn">
            <el-button type="primary" size="medium" :loading="loading" @click="submitForm('ruleForm')">登录</el-button>
          </div>
        </el-form>
      </div>
    </div>
    <div class="copy-right">
      Copyright@2017 新华数据 All rights reserved
    </div>
  </div>

</template>

<script>
  import auth from '../../utils/auth'
  import * as actionTypes from '../../constants/action-types'
  export default {
    name: 'Login',
    data: function(){
      return {
        titles:[
          //'柒维模板',
          '信用加油'],
        ruleForm: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
        },
        loading: false,
      }
    },
    methods: {
      submitForm(formName) {
        const self = this;
        self.$refs[formName].validate((valid) => {
          if (valid) {
            self.loading= true;
            this.$store.dispatch(actionTypes.LOGIN, this.ruleForm).then(()=>{
              self.loading=false;
              self.$router.push(self.$route.query.redirect || '/');
            }).catch(() => {
              self.loading = false
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import '../../styles/variable.styl';
  .wrap
    display flex
    align-items  center
    flex-direction column
    .title-container
      display: flex
      flex-direction row
      margin-top: 30px
      margin-bottom: 30px;
      width 1024px
      .title
        margin-left: 15px
        flex:1
        justify-content: flex-start
        align-items: center
        display flex
        font-size: 38px
        font-weight bold
        .title-left
          color: color-main
        .title-right
          color: color-deep-main
    .login-container
      margin-top:15px
      width 1024px
      height 571px
      background-image url("../../assets/login-bg1.jpg")
      display flex
      justify-content flex-end
      align-items flex-start
      .form-container
        width: 305px
        margin-top: 70px
        margin-right: 140px
        background-color white
        padding-top 60px
        padding-left 21px
        padding-right 21px
        padding-bottom 40px
        .input-icon
          width: 24px
          height: 24px
          margin-right 10px
          margin-top 8px
        .login-btn
          button
            width: 100%
        .login-other
          text-align: right
          margin-bottom: 11px
          margin-top: -11px
          a
            text-decoration: none
            font-size: 14px
          .forget
            color: #A6A6A6
            margin-right: 5px
          .signin
            color: #549ef6
    .copy-right
      font-size: 13px
      margin-top: 15px
</style>
